<template>
  <div class="home-container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="header-content">
        <div class="logo-section">
          <img src="https://py-steven.com/blog/static/image/logo.png" alt="logo" class="logo" />
          <span class="site-title">文章列表</span>
          <span class="site-subtitle">blog</span>
        </div>
        <nav class="nav-menu">
          <a href="#" class="nav-item active">首页</a>
          <a href="#" class="nav-item">笔记</a>
          <router-link to="/study" class="nav-item">学习打卡</router-link>
          <div class="nav-item dropdown">
            功能 <span class="arrow">▼</span>
            <div class="dropdown-menu">
              <a href="#" class="dropdown-item">大赛练习</a>
              <a href="#" class="dropdown-item">错题下载</a>
            </div>
          </div>
          <router-link to="/post/create" class="nav-item">发布</router-link>
          <div class="nav-item dropdown">
            关于 <span class="arrow">▼</span>
            <div class="dropdown-menu">
              <router-link v-if="authStore.isLoggedIn" to="/profile" class="dropdown-item">个人主页</router-link>
              <a href="#" class="dropdown-item" v-if="!authStore.isLoggedIn" @click.prevent="router.push('/login')">个人主页</a>
              <router-link v-if="authStore.isLoggedIn" to="/admin" class="dropdown-item">后台管理</router-link>
              <a href="#" class="dropdown-item" v-if="!authStore.isLoggedIn" @click.prevent="router.push('/login')">后台管理</a>
              <a href="#" class="dropdown-item" @click.prevent="handleLogout" v-if="authStore.isLoggedIn">退出账号</a>
              <router-link v-if="!authStore.isLoggedIn" to="/login" class="dropdown-item">登录</router-link>
            </div>
          </div>
        </nav>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 左侧文章列表 -->
      <div class="content-left">
        <div v-if="loading" class="loading-container">
          <p>加载中...</p>
        </div>
        <div v-else-if="articles.length === 0" class="empty-container">
          <p>暂无文章</p>
        </div>
        <div v-else class="article-list">
          <!-- 文章卡片 -->
          <article class="article-card" v-for="article in articles" :key="article.id">
            <div class="article-header">
              <h2 class="article-title">{{ article.title }}</h2>
              <span class="article-tag">文章列表</span>
            </div>
            <p class="article-description">{{ article.description }}</p>
            <div class="article-meta">
              <span class="meta-item">
                <i class="icon-user"></i>
                {{ article.author }}
              </span>
              <span class="meta-item">
                <i class="icon-tag"></i>
                {{ article.category }}
              </span>
              <span class="meta-item">
                <i class="icon-date"></i>
                {{ article.date }}
              </span>
              <span class="meta-item">
                <i class="icon-view"></i>
                {{ article.views }}
              </span>
            </div>
            <button class="read-more" @click="goToArticle(article.id)">阅读全文 ›</button>
          </article>
        </div>
      </div>

      <!-- 右侧用户信息卡片 -->
      <aside class="sidebar">
        <!-- 搜索框 -->
        <div class="search-box">
          <input type="text" placeholder="输入关键词搜索" class="search-input" />
          <button class="search-btn">🔍</button>
        </div>

        <!-- 用户信息卡片 -->
        <div class="user-card">
          <div class="user-avatar">
            <img :src="(authStore.user?.avatar || authStore.user?.avatar_url) || 'https://py-steven.com/blog/static/image/logo.png'" alt="avatar" />
          </div>
          <h3 class="user-name">{{ authStore.user?.nickname || '游客' }}</h3>
          <p class="user-bio">{{ authStore.user?.bio || authStore.user?.email || '欢迎来到我的博客' }}</p>
          <div class="user-links">
            <a href="#" class="user-link">
              <span class="link-icon">🔗</span>
              Github
            </a>
            <a href="#" class="user-link">
              <span class="link-icon">💻</span>
              Gitee
            </a>
          </div>
          <!-- <p class="user-mood">个人信息</p> -->
        </div>

        <!-- 文章推荐 -->
        <div class="recommend-section">
          <h3 class="section-title">📚 文章推荐</h3>
          <ul class="recommend-list">
            <li class="recommend-item">
              <span class="file-icon">📄</span>
              <a href="#">Python Flask利用sqlalche...</a>
            </li>
            <li class="recommend-item">
              <span class="file-icon">📄</span>
              <a href="#">Awesome Editor!</a>
            </li>
          </ul>
        </div>
      </aside>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/store/auth'
import { logout } from '@/api/auth'
import { getArticles } from '@/api/article'
import message from '@/utils/message'

const router = useRouter()
const authStore = useAuthStore()

// 文章数据
const articles = ref([])
const loading = ref(false)
const pagination = ref({
  page: 1,
  page_size: 10,
  total: 0,
  total_pages: 0
})

// 获取文章列表
const fetchArticles = async () => {
  try {
    loading.value = true
    const response = await getArticles({
      page: pagination.value.page,
      page_size: pagination.value.page_size,
      status: 1 // 只获取已发布的文章
    })

    if (response.code === 200) {
      articles.value = response.data.articles
        .map(article => ({
          id: article.id,
          title: article.title,
          description: article.summary,
          author: 'Steven', // 暂时使用固定值，后续可以根据author_id获取
          category: article.tags?.[0] || '未分类',
          date: article.published_at ? new Date(article.published_at).toISOString().split('T')[0] : '',
          views: article.view_count,
          published_at: article.published_at // 保留原始时间用于排序
        }))
        .sort((a, b) => new Date(b.published_at) - new Date(a.published_at)) // 按创建时间降序排序

      pagination.value.total = response.data.total
      pagination.value.total_pages = response.data.total_pages
    }
  } catch (error) {
    console.error('获取文章列表失败:', error)
    message.error('获取文章列表失败')
  } finally {
    loading.value = false
  }
}

const handleLogout = async () => {
  try {
    await logout()
    authStore.logout()
    message.success('退出登录成功')
    router.push('/login')
  } catch (error) {
    message.error(error.message || '退出登录失败')
  }
}

// 跳转到文章详情
const goToArticle = (articleId) => {
  router.push(`/article/${articleId}`)
}

// 组件挂载时获取文章列表
onMounted(() => {
  fetchArticles()
})
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}

/* 顶部导航栏 */
.header {
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.site-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.site-subtitle {
  font-size: 14px;
  color: #999;
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 4px;
}

.nav-menu {
  display: flex;
  gap: 30px;
  align-items: center;
}

.nav-item {
  color: #333;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.3s;
  position: relative;
}

.nav-item:hover {
  color: #1890ff;
}

.nav-item.active {
  color: #1890ff;
  font-weight: 500;
}

.dropdown {
  position: relative;
}

.arrow {
  font-size: 10px;
  margin-left: 4px;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
  min-width: 140px;
  display: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.2s, transform 0.2s;
}

/* 添加伪元素填补间隙 */
.dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}

.dropdown:hover .dropdown-menu {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.dropdown-item {
  display: block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.2s;
}

.dropdown-item:hover {
  background: #f5f5f5;
}

/* 主内容区 */
.main-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 30px 20px;
  display: flex;
  gap: 30px;
}

/* 左侧内容 */
.content-left {
  flex: 1;
  min-width: 0;
}

.article-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.article-card {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}

.article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.article-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.article-title {
  font-size: 20px;
  color: #333;
  margin: 0;
  font-weight: 600;
  flex: 1;
}

.article-tag {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  margin-left: 12px;
}

.article-description {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  margin: 12px 0;
}

.article-meta {
  display: flex;
  gap: 20px;
  margin: 16px 0;
  font-size: 13px;
  color: #999;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon-user::before { content: '👤'; }
.icon-tag::before { content: '🏷️'; }
.icon-date::before { content: '📅'; }
.icon-view::before { content: '👁️'; }

.read-more {
  background: transparent;
  border: none;
  color: #52c41a;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  transition: color 0.3s;
}

.read-more:hover {
  color: #73d13d;
}

/* 右侧边栏 */
.sidebar {
  width: 320px;
  flex-shrink: 0;
}

.search-box {
  background: white;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  gap: 8px;
}

.search-input {
  flex: 1;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  outline: none;
}

.search-input:focus {
  border-color: #1890ff;
}

.search-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 16px;
}

.user-card {
  background: white;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.user-card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.user-avatar {
  width: 100px;
  height: 100px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #f0f0f0;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-name {
  font-size: 18px;
  color: #333;
  margin: 12px 0 8px;
}

.user-bio {
  color: #999;
  font-size: 13px;
  margin: 8px 0;
}

.user-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 16px 0;
}

.user-link {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #666;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.3s;
}

.user-link:hover {
  color: #1890ff;
}

.link-icon {
  font-size: 16px;
}

.user-mood {
  color: #ff4d4f;
  font-size: 13px;
  margin-top: 12px;
}

.recommend-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 15px;
  color: #333;
  margin: 0 0 16px 0;
  font-weight: 600;
}

.recommend-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recommend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.recommend-item:hover {
  transform: scale(1.05);
  background-color: #f5f5f5;
  border-radius: 4px;
  padding-left: 8px;
  padding-right: 8px;
}

.recommend-item:last-child {
  border-bottom: none;
}

.file-icon {
  font-size: 16px;
}

.recommend-item a {
  color: #666;
  text-decoration: none;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  transition: color 0.3s;
}

.recommend-item a:hover {
  color: #1890ff;
}

/* 加载和空状态 */
.loading-container,
.empty-container {
  padding: 60px 20px;
  text-align: center;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.loading-container p,
.empty-container p {
  color: #999;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .main-content {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }
}
</style>